<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
    <title>Document</title>
</head>

<body>

    <body>
        <div class="wrap">
            <!-- 头部 Header 区域 -->
            <div class="header">
                <h3>小思同学</h3>
                <img src="./img/person01.png" alt="icon" />
            </div>



            <!-- 中间 聊天内容区域 -->
            <div class="main">
                <ul class="talk_list" style="top: 0px;">


                    <li class="left_word">
                        <img src="./img/person01.png" /> <span>你好</span>
                    </li>

                    <li class="right_word">
                        <img src="./img/person02.png" /> <span>你好哦</span>
                    </li>


                    <li class="left_word">
                        <img src="./img/person01.png" /> <span>你好</span>
                    </li>
                    <li class="right_word">
                        <img src="./img/person02.png" /> <span>你好哦</span>
                    </li>
                    <li class="left_word">
                        <img src="./img/person01.png" /> <span>你好</span>
                    </li>
                    <li class="right_word">
                        <img src="./img/person02.png" /> <span>你好哦</span>
                    </li>
                    <li class="left_word">
                        <img src="./img/person01.png" /> <span>你好</span>
                    </li>
                    <li class="right_word">
                        <img src="./img/person02.png" /> <span>你好哦</span>
                    </li>
                    <li class="left_word">
                        <img src="./img/person01.png" /> <span>你好</span>
                    </li>
                    <li class="right_word">
                        <img src="./img/person02.png" /> <span>你好哦</span>
                    </li>
                    <li class="left_word">
                        <img src="./img/person01.png" /> <span>你好</span>
                    </li>
                    <li class="right_word">
                        <img src="./img/person02.png" /> <span>你好哦</span>
                    </li>

                </ul>
                <div class="drag_bar" style="display: none;">
                    <div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;">
                    </div>
                </div>
            </div>


            <!-- 底部 消息编辑区域 -->
            <div class="footer">
                <img src="./img/person02.png" alt="icon" />
                <input type="text" placeholder="说的什么吧..." class="input_txt" />
                <input type="button" value="发 送" class="input_sub" />
                <audio src="" style="display: none;" autoplay></audio>
            </div>



        </div>

        <script src="./js/scroll.js"></script>
        <script src="./js/axios.js"></script>
        <script>
            $(function() {
                //初始化右侧滚动条
                //这个方法定义在scroll.js中
                resetui(); //方法调用后结果，把最低下内容显示出来

                //1.点击右侧发送按钮
                $(".input_sub").on("click", function() {
                    //2.根据用户输入内容动态创建 right_word
                    //获取用户输入内容：输入为空，不能进行下一步；
                    let val = $(".input_txt").val();
                    console.log(val);
                    //字符串trim()两边空格能去除
                    if (val.trim() == "") {
                        alert("不能输入为空");
                        return;
                    }
                    //3.用户输入内容：动态创建 right_word
                    let right = $(`
            <li class="right_word">
                <img src="./img/person02.png"/><span>${val}</span>
                </li>
            `)
                        //给父级添加子元素
                    $(".talk_list").append(right);
                    //显示最新的
                    resetui();
                    //4.输入框为空：
                    //val=""no,原因把变量设置为""
                    $('.input_txt').val("");
                    //5.需要机器人回复信息：需要调用接口。回复接口！
                    //axios记得引入！
                    axios({
                        method: "GET",
                        url: "http://www.liulongbin.top:3006/api/robot",
                        params: {
                            spoken: val
                        }
                    }).then(({
                        data: res
                    }) => {
                        console.log(res);
                        //7.获取机器人回复信息 res.data.info.text,创建左侧li
                        let left = $(`<li class="left_word">
                          <img src="img/person01.png" /> <span>${res.data.info.text}</span>
                        </li>`);
                        // 8.添加到ul里，同时显示出来
                        $(".talk_list").append(left);
                        resetui();
                        //说的话变语音
                        //1.如何变？需要接口 老师说的话 请求---->响应出来
                        //2.代码写哪？放在小思说的话的回调函数内容
                        axios({
                            url: "http://www.liulongbin.top:3009/api/synthesize",
                            params: {
                                text: res.data.info.text, //小思说的话
                            }
                        }).then(({
                            data: res
                        }) => {
                            //res.voiceUrl播放，需要audio标签
                            $("audio").attr("src", res.voiceUrl);
                            //attr 设置属性
                            //prop 设置标准属性
                            //不能直接写.src路径么， 不能 $("audio")是jq对象，不是dom节点
                        })
                    })
                })
            });
        </script>
    </body>

</html>